<template>
  <div class="page flex-col">
    <div class="group_1 flex-col">
      <van-nav-bar
        title="个人中心"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="flex-shrink"
      />
      <div class="section_1 flex-col">
        <div class="box_3 flex-row">
          <div class="image-text_1 flex-row justify-between">
            <img
              class="image_2"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng59558856699fe78210c64871ca2777242c55b221e33d8dc684ffdf5046c79537.png"
            />
            <span class="text-group_1">微信用户</span>
          </div>
        </div>
      </div>
      <div class="section_2 flex-col">
        <div class="group_2 flex-row justify-between">
          <div class="image-text_2 flex-row justify-between">
            <img
              class="image_3"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngdfb399cd6be91d42dc600d6126b0fbbb2a3e2de8f7c8ab358eab053962b0a19d.png"
            />
            <div class="text-group_2 flex-col">
              <span class="text_4">VIP会员</span>
              <span class="text_5">开通VIP享无限畅聊</span>
            </div>
          </div>
          <div class="text-wrapper_2 flex-col" @click="goVip">
            <span class="text_6">立即开通</span>
          </div>
        </div>
        <div class="group_3 flex-row">
          <div class="text-group_3 flex-col">
            <span class="text_7">14条</span>
            <span class="text_8">余额</span>
          </div>
        </div>
        <div class="group_4 flex-row">
          <div class="text-group_4 flex-col">
            <span class="text_9">未开通</span>
            <span class="text_10">VIP有效期</span>
          </div>
        </div>
      </div>
      <div class="section_3 flex-col">
        <div class="group_5 flex-row justify-between" @click="goMyInfo">
          <span class="text_11">个人信息</span>
          <img
            class="thumbnail_4"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng95a14a6b1a7ff1e7606395a0678f3844f06ab1086c3246b48d2ff4c8b9a24c75.png"
          />
        </div>
        <img
          class="image_4"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPngae822aac6d5b8ef3eef66c1ef477edb4265d66d47acb1caef6beeafc8846eb52.png"
        />
        <div class="group_6 flex-row justify-between" @click="conversion">
          <span class="text_12">卡密兑换</span>
          <img
            class="thumbnail_5"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng95a14a6b1a7ff1e7606395a0678f3844f06ab1086c3246b48d2ff4c8b9a24c75.png"
          />
        </div>
        <img
          class="image_5"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPngc01ce3b248280562d9c900c3134e473e7f64d2544d09358938e22a90bcec537e.png"
        />
        <div class="group_7 flex-row justify-between">
          <span class="text_13">用户协议</span>
          <img
            class="thumbnail_6"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng95a14a6b1a7ff1e7606395a0678f3844f06ab1086c3246b48d2ff4c8b9a24c75.png"
          />
        </div>
        <img
          class="image_6"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPngc01ce3b248280562d9c900c3134e473e7f64d2544d09358938e22a90bcec537e.png"
        />
        <div class="group_8 flex-row justify-between">
          <span class="text_14">隐私政策</span>
          <img
            class="thumbnail_7"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng95a14a6b1a7ff1e7606395a0678f3844f06ab1086c3246b48d2ff4c8b9a24c75.png"
          />
        </div>
        <img
          class="image_7"
          referrerpolicy="no-referrer"
          src="./assets/img/SketchPngc01ce3b248280562d9c900c3134e473e7f64d2544d09358938e22a90bcec537e.png"
        />
        <div class="group_9 flex-row justify-between">
          <span class="text_15">免责声明</span>
          <img
            class="thumbnail_8"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng84406b76aff131e1a974821942329a96aa8d07fbd342c37a5cd659310aba5db1.png"
          />
        </div>
      </div>
    </div>
    <van-popup v-model="show" closeable close-icon="close">
      <div class="dialog">
        <div class="title">卡密兑换</div>
        <input
          class="ipt ipt-1"
          v-model.trim="cardNo"
          type="text"
          placeholder="请输入卡号"
        />
        <input
          class="ipt ipt-2"
          v-model.trim="cardPwd"
          type="text"
          placeholder="请输入密码"
        />
        <van-button
          class="btn"
          round
          size="normal"
          block
          color="linear-gradient(to right, #9DFFEC, #28CCC5)"
          @click="submit"
          >确认兑换</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
<script>
import api from "@/api/api.js";
export default {
  data() {
    return {
      constants: {},
      show: false,
      cardNo: "",
      cardPwd: "",
    };
  },
  methods: {
    async submit() {
      if (!this.cardNo) {
        this.$toast("请输入卡号");
        return;
      }
      if (!this.cardPwd) {
        this.$toast("请输入卡密");
        return;
      }
      const { code, data, message } = await api.exchangeMember({
        cardNo: this.cardNo,
        cardPwd: this.cardPwd,
      });
      if (code === "0000") {
        this.$toast("兑换成功");
        this.cardNo = "";
        this.cardPwd = "";
        this.show = false;
      } else {
        this.$toast(message);
      }
    },
    conversion() {
      this.show = true;
    },
    goMyInfo() {
      this.$router.push({
        path: "/myInfo",
      });
    },
    goVip() {
      this.$router.push({
        path: "/vip",
      });
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="less" src="./assets/index.response.less" />
<style lang="less" scoped>
.dialog {
  width: 80vw;
  background: #303038;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  .title {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 28px;
    margin-bottom: 22px;
  }
  .ipt {
    width: 90%;
    height: 48px;
    background: #161616;
    border-radius: 6px;
    border: 1px solid;
    font-size: 14px;
    color: #fff;
    display: block;
    margin: auto;
    padding-left: 10px;
  }
  .ipt-1 {
    border-image: linear-gradient(
        90deg,
        rgba(114, 242, 216, 1),
        rgba(190, 187, 239, 1)
      )
      1 1;
  }
  .ipt-2 {
    margin-top: 12px;
    border-image: linear-gradient(
        90deg,
        rgba(114, 242, 216, 1),
        rgba(190, 187, 239, 1)
      )
      1 1;
  }
  .btn {
    margin: 20px auto;
    width: 90%;
  }
}
/deep/ .van-popup {
  background-color: transparent;
}
</style>
